<template>
    <div class="big_Box">
        <!-- 按钮盒子 -->
        <div class="button_box">
            <slot name="btnSlot"></slot>
        </div>
        <div class="tag_style">
              <span class="tag_font">已选择<span style="color:#8390ff"> {{tableNodeSelected}} </span>项</span>
              <el-button type="text" @click="clearSelectedRow()">清空</el-button>
        </div>
        <div class="table_style">
            <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%;"
            border
            highlight-current-row 
            @selection-change="handleSelectionChange"
            >
                <el-table-column
                type="selection"
                width="50"
                align="center">
                </el-table-column>
                <el-table-column
                v-for="(item , index) in headerData"
                :prop="item.prop"
                :label="item.label"
                :key="index"
                :width="item.width"
                :min-width="item.min_width"
                align="center"
                :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                    <div v-if="item.slot">
                        <slot :name="item.prop" v-bind:row="scope.row"></slot>
                    </div>
                    <div v-if="!item.slot">
                        {{tableData[scope.$index][item.prop]}}
                    </div>
                </template>
                </el-table-column>
            </el-table>
            <div v-show="tableData.length">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
            
        </div>
    </div>
</template>
<script>
export default {
    name:"departRoleData",
    data(){
        return{
            
        }
    },
    methods:{
        clearSelectedRow(){
            this.$refs.multipleTable.clearSelection();
        },
        handleSelectionChange(val) {
            // console.log(val);
            this.$emit("getSelection",val);
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.$emit("SizeChange" , val);
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.$emit("CurrentPageChange" , val);
        }
        },
    props:{
        // 表头数据
        headerData:{
            type:Array,
            default:()=>{
                return [];
            }
        },
        // 表格数据
        tableData:{
            type:Array,
            default:()=>{
                return [];
            }
        },
        // 当前第几页
        currentPage:{
            type:Number,
            default:()=>{
                return 1
            }
        },
        // 一页多少条 
        pageSize:{
            type:Number,
            default:()=>{
                return 10
            }
        },
        //总条件
        total:{
            type:Number,
            default:()=>{
                return 0
            }
        },
        // 被选中的总条数
        tableNodeSelected:{
            type:Number,
            default:()=>{
                return 0
            }
        },
    }
}
</script>
<style lang="less" scoped>
    .big_Box{
        
        .button_box{
            margin-bottom: 15px;
        }
        .tag_style{
            width:100%;
            background-color: #e6f7ff;
            border: 1px solid #91d5ff;
            height: 38px;
            border-radius: 4px;
            margin-bottom: 15px;
            .tag_font{
                margin-left: 40px;
                line-height: 40px;
                margin-right: 30px;
            }
        }
    }
</style>
